/*
* @Description:网络扩展-生成扩展网络
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div>
    <div class="deploy">
      <div class="deploy-hd">
        <el-button type="primary" :disabled="disExtendConfig" icon="iconfont zfsoft-dianzibiaodan-daimabianjiqi"
          @click="generateExtendConfig">
          生成扩展配置文件</el-button>
        <el-button type="warning" :disabled="disExtendFabric" icon="iconfont zfsoft-dianzibiaodan-chuansuoqi"
          @click="extendFabric">扩展区块链网络
        </el-button>
      </div>
      <div class="deploy-bd">
        <pre class="deploy-bd-main" id='deployShow'>{{resdata}}</pre>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    loadStatus,
    alertStatus
  } from '@/api/blockchain/deployhost'
  import {
    generateExtendConfig,
  } from '@/api/blockchain/networkmanage'
  import {
    deployFabric
  } from '@/api/blockchain/deployblockchain'
  export default {

    data() {
      return {
        // dialogVisible: false,
        resdata: '',
        path: `ws://${process.env.VUE_APP_BASE_API_WS}/deploy/websocket/2388`,
        socket: "",
        scrollTop: null,
        disExtendConfig: false,
        disExtendFabric: false
      };
    },
    mounted() {
      // 初始化
      this.init();
    },
    methods: {
      init() {
        if (typeof (WebSocket) === "undefined") {
          this.$message.warning('您的浏览器不支持socket！');
        } else {
          this.socket = new WebSocket(this.path)
          this.socket.onopen = this.open
          this.socket.onerror = this.error
          this.socket.onmessage = this.getMessage
        }
        loadStatus().then((res) => {
          this.disExtendConfig = !Boolean(res.data.extend_gen);
          this.disExtendFabric = !Boolean(res.data.extend_deploy);
        })
      },
      open() {
        console.log("socket连接成功")
      },
      error() {
        console.log("连接错误")
      },
      getMessage(msg) {
        this.resdata += msg.data + '\n';
        this.$nextTick(() => {
          let msg = document.getElementById('deployShow')
          msg.scrollTop = msg.scrollHeight
        })
      },
      send(params) {
        this.socket.send(params)
      },
      close() {
        console.log("socket已经关闭")
      },
      generateExtendConfig() {
        generateExtendConfig().then((res) => {
          this.resdata = res.data;
          this.disExtendConfig = true;
          this.disExtendFabric = false;
          alertStatus(2, 1, 0, 2, 2, 2);
        }).catch((err) => {
          console.log(err);
          alertStatus(2, 0, 1, 2, 2, 2);
        });
      },
      extendFabric() {
        this.$emit('configState', true);
        this.resdata = ''
        deployFabric("extend").then((res) => {
          if (res.msg == 0) {
            this.$message.success("网络扩展完成");
          } else {
            this.$message.error(res.data)
          }
          alertStatus(2, 0, 1, 2, 2, 2);
          this.disExtendFabric = true;
          this.disExtendConfig = false;
          this.$emit('configState', false);
        }).catch(() => {
          alertStatus(2, 0, 1, 2, 2, 2);
          this.$emit('configState', false);
        });
        // this.dialogVisible = true
      },
    },
  };

</script>
<style lang="scss" scoped>
  .deploy {
    margin-top: 10px;
    border: 1px solid #e0e6f0;
    background-color: #fff;

    .deploy-hd {
      padding: 15px 20px;

      .el-button>>>i {
        margin-right: 5px;
      }
    }

    .deploy-bd {
      padding: 15px 10px 15px 20px;
      border-top: 1px solid #e0e6f0;

      .deploy-bd-main {
        min-height: 300px;
        max-height: 650px;
        padding-right: 5px;
        overflow-y: auto;

        &>.div {
          word-break: break-all;
        }

        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
          margin: 0 5px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 6px;
          background: #d7d7d7;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #fff;
        }
      }
    }
  }

</style>
